<template>
    <div id='tabbar'>
        <div>
            <div class="mint-tabbar">
                <a :class="'mint-tab-item ' + (selected == item.name ? ' is-selected':'')" 
                    v-for="(item,key) in tabbars" :key="key" 
                    @click="switchTab(item.urlName)">
                    <div class="mint-tab-item-icon">
                    <img :src="item.picSrc"></div>
                    <div class="mint-tab-item-label">{{item.name}}</div>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
import indexLogo from '../../public/images/logo.png';
export default {
    props: {
        selected: String,
    },
    data(){
        return {
            tabbars: [
                {
                    picSrc: indexLogo,
                    name: '首页',
                    urlName: 'index',
                },    
                {
                    picSrc: indexLogo,
                    name: '优惠卷查询',
                    urlName: 'yhjcx',
                },    
            ]
        }
    },
    methods: {
        switchTab(urlName){
            this.$router.push({ name:urlName })
        }
    }
}
</script>

<style>
body{
    margin-bottom: 55px;
}
#tabbar{
    position: fixed;
    bottom: 0;
    width: 100%;
}
.mint-tabbar > .mint-tab-item.is-selected {
    background-color:#fafafa;
    color: #ff5300;
}
</style>